<!-- 初始号   库存管理页 -->
<script setup>
const  tableData=[
    {
        msg:'2024-6-28',//商品信息
        price:'11',//价格
        totality:'82',//总库存
        click:'116',//点击量
        SalesVolume:'',// 销量
        time:'',// 时间
        state:'',// 状态
        link:'',// 链接
        operation:'',// 操作
        advanced:'',// 高级操作
        

        //<el-table-column prop="operation" label="操作" width="180" />
        //<el-table-column prop="advanced" label="高级操作" width="180" />
        //<el-table-column prop="link" label="链接" width="180" />

    },
]
</script>

<template>
    <el-container class="container">
                <!-- header -->
                <el-header class="header">
                    <div class="header_left">
                        <div class="list">
                            <span>初始号&nbsp;库存管理</span>
                        </div>
                        <div class="all">
                            <span>全部</span>
                            <span>待出库</span>
                            <span>已出库</span>
                        </div>
                    </div>
                </el-header>
                <!-- <div class="headerTwo">
                    <span>全部</span>
                    <span>上架中</span>
                    <span>已下架</span>
                </div> -->
                <div class="change">
                    <!-- 表单 -->
                    <div class="c_id">
                        <el-form :inline="true" class="demo-form-inline">
                            <el-form-item label="订单编号">
                                <el-input placeholder="请输入" clearable />
                            </el-form-item>
                            <el-form-item label="商品ID">
                                <el-input placeholder="请输入" clearable />
                            </el-form-item>
                            <el-form-item label="游戏名称">
                                <el-select placeholder="请选择" clearable style="width: 200px;">
                                    <el-option label="Zone one" value="shanghai" />
                                    <el-option label="Zone two" value="beijing" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="买家">
                                <el-input placeholder="请输入" clearable />
                            </el-form-item>
                            <el-form-item style="width: 200px;" label="订单状态">
                                <el-select placeholder="全部" clearable style="width: 200px;">
                                    <el-option label="Zone one" value="shanghai" />
                                    <el-option label="Zone two" value="beijing" />
                                </el-select>
                            </el-form-item>
                            <!-- <el-form-item label="类目区服">
                                <el-select placeholder="请选择" clearable style="width: 200px;">
                                    <el-option label="Zone one" value="shanghai" />
                                    <el-option label="Zone two" value="beijing" />
                                </el-select>
                            </el-form-item> -->
                            <!-- 日期选择器 -->
                            
                            <!-- <el-form-item style="width: 200px;" label="公开">
                                <el-select placeholder="请选择" clearable style="width: 200px;">
                                    <el-option label="Zone one" value="shanghai" />
                                    <el-option label="Zone two" value="beijing" />
                                </el-select>
                            </el-form-item> -->
                        </el-form>
                    </div>
                    <div class="c_pirce">
                        <el-form :inline="true" class="demo-form-inline">
                            <el-form-item label="创建时间">
                                <el-date-picker style="width: 200px;" type="daterange" start-placeholder="开始"
                                    end-placeholder="结束"
                                    :default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]" />
                            </el-form-item>
                            <el-form-item label="收货时间">
                                <el-date-picker style="width: 200px;" type="daterange" start-placeholder="开始"
                                    end-placeholder="结束"
                                    :default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]" />
                            </el-form-item>
                            <el-form-item label="完成时间">
                                <el-date-picker style="width: 519px;" type="daterange" start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]" />
                            </el-form-item>

                            <!-- 搜索/重置 -->
                            <el-button type="primary">
                                <el-icon>
                                    <Search />
                                </el-icon>
                                搜索
                            </el-button>
                            <el-button>重置</el-button>
                            <el-form-item label="更新时间">
                                <el-date-picker style="width: 519px;" type="daterange" start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]" />
                            </el-form-item>
                        </el-form>
                    </div>



                </div>
                <!-- main -->
                <el-main class="main">
                    <!-- 刷新/新增按钮 -->
                    <!-- <el-button>
                        刷新
                    </el-button> -->
                    <el-button type="primary">+ 添加</el-button>
                    <el-button type="primary">+ 批量添加</el-button>
                    <el-button>批量删除</el-button>
                    <!-- 游戏列表  table -->
                    <el-table :data="tableData">
                        <!-- 多选  没写事件-->
                        <el-table-column type="selection" width="55px"></el-table-column>
                        <el-table-column prop="msg" label="卡组编号"  />
                        <el-table-column prop="price" label="游戏信息" ></el-table-column>
                        <el-table-column prop="totality" label="角色集"  />
                        <el-table-column prop="click" label="游戏帐密"  />
                        <el-table-column prop="SalesVolume" label="邮箱账密"  />
                        <el-table-column prop="time" label="绑定手机号"  />
                        <el-table-column prop="link" label="价格"  />
                        <el-table-column prop="advanced" label="备注"  />
                        <el-table-column prop="state" label="状态"  />
                        <el-table-column prop="operation" label="操作"  />
                    </el-table>
                </el-main>
            </el-container>
</template>

<style lang="scss" scoped>
// @mixin FontStyle
// main 2,3,4样式
@mixin MainDiv{
            float: left;
            background-color: #FFFFFF;
            margin-top: 10px;
            border-radius: 10px;
            margin-right: 89px;
        }

.container {
        width: 100%;
        height: 1044px;
        // background-color: #d7e4f1;
        float: left;
        margin-top: 10px;
        margin-left: 10px;

        .header {
            height: 110px;
            background-color: #FFFFFF;
            float: left;
            border-radius: 10px;

            .header_left {
                width: 231px;
                height: 100px;
                margin-top: 10px;
                margin-left: 20px;

                .list {
                    width: 170px;
                    height: 44px;

                    span {
                        font-size: 20px;
                        color: #333333;
                    }
                }

                .all {
                    width: 226px;
                    height: 46px;
                    margin-top: 10px;
                    line-height: 46px;
                    display: flex;
                    flex-wrap: wrap;
                    display: -webkit-flex;

                    span {
                        flex: 1;
                    }
                }
            }
        }
        .headerTwo{
            height: 54px;
            
            /* background-color: #FFFFFF;
            float: left;
            border-radius: 10px;
            margin-top: 10px;
            margin-right: 89px; */
            span{
                margin-left: 32px;
                line-height: 54px;
            }
            @include MainDiv
        }

        .change {
            // width: 1608px;
            height: 191px;
            /* background-color: #FFFFFF;
            float: left;
            margin-top: 10px;
            border-radius: 10px;
            margin-right: 89px; */

            .c_id,
            .c_pirce {
                // width: 1582px;
                height: 32px;
                // background-color: #dea5a5;
                /* margin-top: 24px;
                margin-left: 24px; */
                margin: 24px 0 0 24px;
            }
            @include MainDiv
        }

        .main {
            // width: 1608px;
            height: 759px;
            @include MainDiv
            /* background-color: #FFFFFF;
            float: left;
            margin-top: 10px;
            margin-right: 89px;
            border-radius: 10px; */
        }
    }
</style> 